<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
  }
  .container {
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .component-group {
    margin-bottom: 20px;
  }
  .component {
    margin-bottom: 20px;
  }
  .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
  }
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
  }
  input:checked + .slider {
    background-color: #2196F3;
  }
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  input:checked + .slider:before {
    transform: translateX(26px);
  }
  .slider.round {
    border-radius: 34px;
  }
  .slider.round:before {
    border-radius: 50%;
  }
  label {
    display: block;
    margin-bottom: 5px;
    color: #333;
  }
  input[type="range"] {
    width: 100%;
  }
  input[type="text"],
  button {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-sizing: border-box;
  }
  button {
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  button:hover {
    background-color: #0056b3;
  }
  .container ::-webkit-scrollbar{
    display: none;
  }
</style>
</head>
<body>

<div class="container">
    <div class="component-group">
        <label for="inputField">TVP-防作弊</label>
    <label class="switch">
      <input type="checkbox" checked="true" id="toogleswitth-fzb">
      <span class="slider round"></span>
    </label>
  </div>

  <div class="component-group">
    <label for="inputField">答题时长(学生开始答题时,限时)</label>
    <input type="text" id="time_dt" placeholder="请输入时间(Min),0则不启用">
  </div>
  <div class="component-group">
    <label for="inputField">考试日期范围(比如:11/17-11/19)</label>
    <input type="text" id="time_date" placeholder="请输入日期范围(例如:11/17-11/19),0则不启用">
  </div>
  <div class="component-group">
    <label for="inputField">是否限制次数(限制同考生答题次数)</label>
    <label class="switch">
        <input type="checkbox" id="toogleswitth-xnum">
        <span class="slider round"></span>
      </label>
  </div>
  <div style="display: none;" class="component-group">
    <label for="inputField">是否在线监考</label>
    <label class="switch">
        <input type="checkbox" id="toogleswitth-xonline">
        <span class="slider round"></span>
      </label>
  </div>
  <div id="pzstewscont" style="display: none;" class="component-group">
    <label for="inputField">配置链接地址</label>
    <input type="text" id="pzlinkurl" placeholder="请输入链接地址,非专业人士请填0">
  </div>
  <div class="component-group">
    <label for="inputField">是否开启绑定学生答题</label>
    <label class="switch">
        <input type="checkbox" id="toogleswitth-xbindelse">
        <span class="slider round"></span>
      </label>
  </div>
  <div class="component-group">
    <button id="gotsavesetting">保存配置</button>
  </div>
</div>

</body>
</html>
<script>
    function geturlsearch_main(){ //获取页面参数
        var queryString = window.location.search; 
        var valueAfterQuestionMark = queryString.substring(1);
        return valueAfterQuestionMark;
    }
    fetch('../exam/getsetting.php?geto='+geturlsearch_main()).then(res => res.json()).then((out) => {
        if(out.code === 0){
            alert("获取配置失败");
            return;
        }
        var dates = out.data;
        let arraydata = JSON.parse(dates);
        document.getElementById("time_dt").value = arraydata[0];
        document.getElementById("time_date").value = arraydata[1];
        if(arraydata[2] === 1){
            document.getElementById("toogleswitth-xnum").checked = true;
        }
        if(arraydata[3][0] === 1){
            document.getElementById("toogleswitth-xonline").checked = true;
            document.getElementById("pzstewscont").style.display = "block";
            document.getElementById("pzlinkurl").value = arraydata[3][1];
        }
        if(arraydata[4] === 1){
            document.getElementById("toogleswitth-xbindelse").checked = true;
        }
    })
    document.getElementById("toogleswitth-fzb").addEventListener('click', function () {
        alert("防作弊无法关闭");
        this.checked = true;
    });
    document.getElementById("toogleswitth-xonline").addEventListener('click', function () {
        if(this.checked === true){
            document.getElementById("pzstewscont").style.display = "block";
        }else{
            document.getElementById("pzstewscont").style.display = "none";
        }
    });
    document.getElementById("gotsavesetting").addEventListener('click', function () {
        var time_dt = document.getElementById("time_dt").value;
        var time_date = document.getElementById("time_date").value;
        var toogleswitth_xnum = 0;
        if(document.getElementById("toogleswitth-xnum").checked === true){
            toogleswitth_xnum = 1;
        }
        var toogleswitth_xonline = 0;
        var pzlinkurl = 0;
        if(document.getElementById("toogleswitth-xonline").checked === true){
            toogleswitth_xonline = 1;
        }
        var bindel = document.getElementById("toogleswitth-xbindelse").checked ? 1 : 0;
        var hzjtjs = `[${time_dt},"${time_date}",${toogleswitth_xnum},[${toogleswitth_xonline},"${pzlinkurl}"],${bindel}]`;
        const formData = new FormData();
    formData.append('info', hzjtjs);
    formData.append('id', geturlsearch_main());
    fetch('ds.php', {
        method: 'POST',
        body: formData
    })
    .then(function (response) {
        return response.json();
    }).then(function (data) {
        if(data.status === 200){
            alert("保存成功");
        }else{
            alert("保存失败");
        }
    });  
    });
</script>